<template>
  <div class="srGame">
    <div class="lexicon" @click="escaut">
      <el-icon><ArrowLeft /></el-icon>ESC
    </div>

    <div class="content">
      <div class="left" :class="{ leftof: isBin }">
        <zwView ref="zwViewRef1"></zwView>
      </div>
      <div class="main" :class="{ mainof: isBin }">
        <div class="top" v-show="!isBin">
          <rwView ref="rwViewRef" @putList="getList"></rwView>
        </div>
        <div class="bottom">
          <el-button class="elbottom" @click="goTrue">投掷</el-button>
          <el-button class="elbottom" @click="chongtou">重投</el-button>
        </div>
      </div>
      <div class="right" :class="{ rightof: isBin }">
        <zwView ref="zwViewRef2"></zwView>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, reactive } from "vue";
import zwView from "./components/zwView.vue";
import rwView from "./components/rwView.vue";
import router from "@/router";

const props = defineProps({
  //   isBin: {
  //     type: Boolean,
  //     default: false,
  //   },
});
const isBin = ref(props.isBin);
const putList = reactive([]);

const rwViewRef = ref(null);

function escaut() {
  router.push({
    path: "/",
  });
}

function goTrue() {
  isBin.value = !isBin.value;
}

function chongtou() {
  if (rwViewRef.value) {
    console.log(rwViewRef);
    
    rwViewRef.value.reinvestment();
  }
}

function getList(data) {
  putList.values = data;
  console.log(putList);
}
</script>

<style lang="less" scoped>
.srGame {
  width: 100vw;
  height: 100vh;
  .lexicon {
    position: absolute;
    font-size: 28px;
    cursor: pointer;
    left: 10px;
    top: 10px;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
  }
  .content {
    position: absolute;
    width: 84%;
    height: 84%;
    left: 8%;
    top: 8%;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    .left {
      width: 15%;
      height: 100%;
      transition: all 2s ease;
    }
    .leftof {
      transform: translateX(200%);
    }
    .main {
      flex: 1;
      height: 100%;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      align-items: center;
      .top{
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        min-width: 500px;
        height: 100%;
        flex: 1;
      }
    }
    .right {
      width: 15%;
      height: 100%;
      transition: all 2s ease;
    }
    .rightof {
      transform: translateX(-200%);
    }
    .elbottom {
      width: 200px;
      height: 80px;
      font-size: 18px;
    }
  }
}
</style>
